<template>
	<view class="all">
		<view>
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar title="意见反馈" @rightClick="rightClick" :autoBack="true" rightText='反馈记录'>
			</u-navbar>
		</view>
		<view class="questionType">
			<view class="title">
				请选择返回问题的类型<text style="color: red;">*</text>
			</view>
			<view class="">
				<u-radio-group  v-model="radiovalue1" placement="column" @change="groupChange" iconPlacement="right">
					<u-radio  labelColor='#242424' :customStyle="radioStyle" v-for="(item, index) in radiolist1" :key="index"
						:label="item.type_name" :name="item.type_name" @change="radioChange(item)">
					</u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="question">
			<view class="title">
				问题和意见<text style="font-size: 24rpx;color: #868686;">(200字以内)</text><text style="color: red;">*</text>
			</view>
			<view class="">
				<u--textarea v-model="formdata.idea_content" placeholder="请输入内容" count height="150px"
					maxlength="200"></u--textarea>
			</view>

		</view>
		<view class="uplode">
			<view class="title">
				上传图片<text style="font-size: 24rpx;color: #868686;">(提供问题截图)</text>
			</view>
			<view class="">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="10"></u-upload>
			</view>
		</view>
		<view class="btn">
			<view class="btns" @click="suggestUplode()">
				上传
			</view>
		</view>
	</view>
</template>

<script>
	import {feedbackType,clientFeedbackAdd} from '@/utils/api.js'
	export default {
		data() {
			return {
				token: '',
				fileList1: [],
				radioStyle: {
					padding: ' 0 10px',
					height: '55px',
					borderBottom: '0.5px  #f6f6f6 solid',
					color: '#242424',
				},
				formdata:{
					idea_type:1,
					idea_content:'',
					idea_img:''
				},
				count: '',
				textareaValue: '',
				radiolist1: [],
				radiovalue1: '实名认证',
				urlArr:[],
				str:''
			};
		},
		onShow() {
			try {
				const value = uni.getStorageSync('user');
				if (value) {
					this.token = value.api_token
				}
			} catch (e) {
				// error
			}
			this.feedbackType()
		},
		methods: {
			suggestUplode(){
				if(this.formdata.idea_content==''){
					uni.showToast({
						title:'请输入问题和意见',
						icon:'none'
					})
					return
				}
				this.str=this.urlArr.join(',')
				this.formdata.idea_img=this.str
				clientFeedbackAdd(this.formdata).then(res=>{
					if (res.data.meta.status == 200) {
							uni.showToast({ title:"反馈成功!", icon: 'none' });
							setTimeout(()=>{
								uni.navigateBack()
							},1000)
						}
						else{
							uni.showToast({ title:res.meta.msg, icon: 'none' });
						}
				})
			},
			feedbackType() {
				feedbackType().then(res=>{
					if (res.data.meta.status == 200) {
						this.radiolist1 = res.data.data
					}
				})
			},
			rightClick() {
				console.log('rightClick');
				uni.navigateTo({
					url: '/pages/my/setting/suggestion/suggestionHistory'
				})
			},
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
				this.formdata.idea_type=n.id
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.urlArr.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				console.log(url,'-----------------');
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url:'https://www.ghhlkj.com/api/saveFile',
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							this.urlArr.push(JSON.parse(res.data).url)
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.questionType {
		margin-top: 100px;
		background-color: #ffffff;

		.title {
			background-color: #ffffff;
			padding: 0 10px;
			font-size: 32rpx;
			height: 55px;
			line-height: 55px;
			font-weight: Medium;
			border-bottom: 0.5px #f6f6f6 solid;
			font-weight: bold;
		}
	}

	.question {
		background-color: #ffffff;
		margin-top: 10px;

		.title {
			background-color: #ffffff;
			padding: 0 10px;
			font-size: 32rpx;
			height: 55px;
			line-height: 55px;
			font-weight: Medium;
			border-bottom: 0.5px #f6f6f6 solid;
			font-weight: bold;
		}
	}

	.uplode {
		background-color: #ffffff;
		margin-top: 10px;

		.title {
			background-color: #ffffff;
			padding: 0 10px;
			font-size: 32rpx;
			height: 55px;
			line-height: 55px;
			font-weight: Medium;
			border-bottom: 0.5px #f6f6f6 solid;
			font-weight: bold;
		}
	}

	.btn {
		height: 120px;
		display: flex;
		justify-content: center;
		align-items: center;

		.btns {
			text-align: center;
			width: 231px;
			height: 44px;
			border-radius: 22px;
			background-color: #5398F6;
			line-height: 44px;
			color: #FFFFFF;
			font-size: 16px;
			font-weight: bold;
		}
	}
</style>